<template>
  <div class="child-progress">
    <!-- 页面头部 -->
    <div class="page-header">
      <button class="back-btn" @click="goBack">
        ← 返回
      </button>
      <h1>📈 学习进度</h1>
      <div class="header-actions">
        <button class="action-btn export-btn" @click="exportReport">
          📥 导出报告
        </button>
        <button class="action-btn refresh-btn" @click="refreshData">
          🔄 刷新
        </button>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="content-container">
      <!-- 孩子选择器 -->
      <div class="child-selector">
        <label>选择孩子：</label>
        <select v-model="selectedChildId" @change="loadChildProgress" class="child-select">
          <option v-for="child in children" :key="child.id" :value="child.id">
            {{ child.name }} ({{ child.age }}岁)
          </option>
        </select>
      </div>

      <!-- 总体统计卡片 -->
      <div class="stats-grid">
        <div class="stat-card primary">
          <div class="stat-icon">📚</div>
          <div class="stat-content">
            <div class="stat-label">学习天数</div>
            <div class="stat-value">{{ statistics.totalDays }}</div>
            <div class="stat-change positive">+{{ statistics.daysThisWeek }} 本周</div>
          </div>
        </div>

        <div class="stat-card success">
          <div class="stat-icon">✅</div>
          <div class="stat-content">
            <div class="stat-label">完成课程</div>
            <div class="stat-value">{{ statistics.completedCourses }}</div>
            <div class="stat-change positive">+{{ statistics.coursesThisWeek }} 本周</div>
          </div>
        </div>

        <div class="stat-card info">
          <div class="stat-icon">⏱️</div>
          <div class="stat-content">
            <div class="stat-label">总学习时长</div>
            <div class="stat-value">{{ formatTime(statistics.totalTime) }}</div>
            <div class="stat-change positive">+{{ formatTime(statistics.timeThisWeek) }} 本周</div>
          </div>
        </div>

        <div class="stat-card warning">
          <div class="stat-icon">⭐</div>
          <div class="stat-content">
            <div class="stat-label">获得星星</div>
            <div class="stat-value">{{ statistics.totalStars }}</div>
            <div class="stat-change positive">+{{ statistics.starsThisWeek }} 本周</div>
          </div>
        </div>
      </div>

      <!-- 学习趋势图表 -->
      <div class="chart-section">
        <div class="section-header">
          <h2>📊 学习趋势</h2>
          <div class="chart-controls">
            <button 
              v-for="period in timePeriods" 
              :key="period.value"
              class="period-btn"
              :class="{ active: selectedPeriod === period.value }"
              @click="selectedPeriod = period.value"
            >
              {{ period.label }}
            </button>
          </div>
        </div>
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-bars">
              <div 
                v-for="(day, index) in chartData" 
                :key="index"
                class="chart-bar"
                :style="{ height: `${day.value}%` }"
              >
                <div class="bar-value">{{ day.value }}分钟</div>
                <div class="bar-label">{{ day.date }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 模块进度 -->
      <div class="modules-section">
        <h2>🎯 各模块进度</h2>
        <div class="modules-grid">
          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">👂</div>
              <div class="module-info">
                <h3>磨耳朵听力</h3>
                <p>提升英语语感</p>
              </div>
            </div>
            <div class="module-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: `${moduleProgress.listening}%` }"></div>
              </div>
              <div class="progress-text">{{ moduleProgress.listening }}%</div>
            </div>
            <div class="module-stats">
              <div class="module-stat">
                <span class="stat-label">完成课程</span>
                <span class="stat-value">12/20</span>
              </div>
              <div class="module-stat">
                <span class="stat-label">本周学习</span>
                <span class="stat-value">3次</span>
              </div>
            </div>
          </div>

          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">📚</div>
              <div class="module-info">
                <h3>绘本阅读</h3>
                <p>阅读英文绘本故事</p>
              </div>
            </div>
            <div class="module-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: `${moduleProgress.reading}%` }"></div>
              </div>
              <div class="progress-text">{{ moduleProgress.reading }}%</div>
            </div>
            <div class="module-stats">
              <div class="module-stat">
                <span class="stat-label">已读绘本</span>
                <span class="stat-value">8/15</span>
              </div>
              <div class="module-stat">
                <span class="stat-label">本周阅读</span>
                <span class="stat-value">2本</span>
              </div>
            </div>
          </div>

          <div class="module-card">
            <div class="module-header">
              <div class="module-icon">🎮</div>
              <div class="module-info">
                <h3>单词游戏</h3>
                <p>玩游戏学单词</p>
              </div>
            </div>
            <div class="module-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: `${moduleProgress.game}%` }"></div>
              </div>
              <div class="progress-text">{{ moduleProgress.game }}%</div>
            </div>
            <div class="module-stats">
              <div class="module-stat">
                <span class="stat-label">通关关卡</span>
                <span class="stat-value">5/10</span>
              </div>
              <div class="module-stat">
                <span class="stat-label">获得星星</span>
                <span class="stat-value">12⭐</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近学习记录 -->
      <div class="recent-section">
        <div class="section-header">
          <h2>📝 最近学习记录</h2>
          <button class="view-all-btn" @click="viewAllRecords">查看全部 →</button>
        </div>
        <div class="records-list">
          <div 
            v-for="record in recentRecords" 
            :key="record.id"
            class="record-item"
          >
            <div class="record-icon">{{ record.icon }}</div>
            <div class="record-content">
              <div class="record-title">{{ record.title }}</div>
              <div class="record-desc">{{ record.description }}</div>
              <div class="record-meta">
                <span class="record-time">{{ record.time }}</span>
                <span class="record-duration">时长: {{ record.duration }}</span>
              </div>
            </div>
            <div class="record-status" :class="record.status">
              {{ record.status === 'completed' ? '✓ 已完成' : '进行中' }}
            </div>
          </div>
        </div>
      </div>

      <!-- 成就展示 -->
      <div class="achievements-section">
        <h2>🏆 最近获得的成就</h2>
        <div class="achievements-list">
          <div 
            v-for="achievement in recentAchievements" 
            :key="achievement.id"
            class="achievement-item"
          >
            <div class="achievement-icon">{{ achievement.icon }}</div>
            <div class="achievement-info">
              <div class="achievement-name">{{ achievement.name }}</div>
              <div class="achievement-date">{{ achievement.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { childEnglishApi } from '@/api/childEnglishApi';

export default {
  name: 'ChildProgress',
  data() {
    return {
      selectedChildId: 1,
      children: [
        { id: 1, name: '小明', age: 6 },
        { id: 2, name: '小红', age: 5 }
      ],
      statistics: {
        totalDays: 45,
        daysThisWeek: 5,
        completedCourses: 28,
        coursesThisWeek: 3,
        totalTime: 3600, // 分钟
        timeThisWeek: 180,
        totalStars: 156,
        starsThisWeek: 12
      },
      selectedPeriod: 'week',
      timePeriods: [
        { label: '本周', value: 'week' },
        { label: '本月', value: 'month' },
        { label: '本年', value: 'year' }
      ],
      chartData: [
        { date: '周一', value: 45 },
        { date: '周二', value: 60 },
        { date: '周三', value: 30 },
        { date: '周四', value: 75 },
        { date: '周五', value: 50 },
        { date: '周六', value: 90 },
        { date: '周日', value: 65 }
      ],
      moduleProgress: {
        listening: 60,
        reading: 53,
        game: 50
      },
      recentRecords: [
        {
          id: 1,
          icon: '🎮',
          title: '单词游戏 - 第3关',
          description: '完成了"句子构造"关卡',
          time: '今天 14:30',
          duration: '15分钟',
          status: 'completed'
        },
        {
          id: 2,
          icon: '📚',
          title: '绘本阅读 - 小王子',
          description: '阅读了第5-8页',
          time: '今天 10:20',
          duration: '20分钟',
          status: 'completed'
        },
        {
          id: 3,
          icon: '👂',
          title: '磨耳朵听力 - 儿歌练习',
          description: '学习了3首英文儿歌',
          time: '昨天 16:45',
          duration: '25分钟',
          status: 'completed'
        },
        {
          id: 4,
          icon: '🎮',
          title: '单词游戏 - 第4关',
          description: '正在进行"动物世界"关卡',
          time: '昨天 15:00',
          duration: '进行中',
          status: 'progress'
        }
      ],
      recentAchievements: [
        {
          id: 1,
          icon: '⭐',
          name: '单词小达人',
          date: '2024-11-18'
        },
        {
          id: 2,
          icon: '📚',
          name: '阅读小能手',
          date: '2024-11-15'
        },
        {
          id: 3,
          icon: '🎯',
          name: '连续学习7天',
          date: '2024-11-10'
        }
      ]
    };
  },
  async mounted() {
    await this.loadChildProgress();
  },
  methods: {
    async loadChildProgress() {
      try {
        // 后续对接真实API
        // const response = await childEnglishApi.getChildLearningProgress();
        console.log('加载孩子学习进度:', this.selectedChildId);
      } catch (error) {
        console.error('加载学习进度失败:', error);
      }
    },
    
    formatTime(minutes) {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      if (hours > 0) {
        return `${hours}小时${mins}分钟`;
      }
      return `${mins}分钟`;
    },
    
    refreshData() {
      this.loadChildProgress();
      // 显示刷新提示
      alert('数据已刷新！');
    },
    
    exportReport() {
      // 后续实现导出功能
      alert('报告导出功能开发中...');
    },
    
    viewAllRecords() {
      // 后续实现查看全部记录
      alert('查看全部记录功能开发中...');
    },
    
    goBack() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.child-progress {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.back-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);
}

.page-header h1 {
  margin: 0;
  color: white;
  font-size: 28px;
  font-weight: 600;
  flex: 1;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
}

.child-selector {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.child-selector label {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.child-select {
  flex: 1;
  max-width: 300px;
  padding: 10px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  color: #2c3e50;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.child-select:hover {
  border-color: #667eea;
}

.child-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-left: 4px solid;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border-left-color: #667eea;
}

.stat-card.success {
  border-left-color: #27ae60;
}

.stat-card.info {
  border-left-color: #3498db;
}

.stat-card.warning {
  border-left-color: #f39c12;
}

.stat-icon {
  font-size: 48px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  flex-shrink: 0;
}

.stat-card.success .stat-icon {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}

.stat-card.info .stat-icon {
  background: linear-gradient(135deg, #3498db 0%, #5dade2 100%);
}

.stat-card.warning .stat-icon {
  background: linear-gradient(135deg, #f39c12 0%, #f4d03f 100%);
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
}

.stat-change.positive {
  color: #27ae60;
}

.chart-section,
.modules-section,
.recent-section,
.achievements-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.section-header h2 {
  color: #2c3e50;
  font-size: 24px;
  margin: 0;
}

.chart-controls {
  display: flex;
  gap: 10px;
}

.period-btn {
  padding: 8px 16px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  color: #7f8c8d;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.period-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.period-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
}

.chart-container {
  height: 300px;
  margin-top: 20px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  gap: 15px;
}

.chart-bar {
  flex: 1;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px 8px 0 0;
  position: relative;
  min-height: 40px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.chart-bar:hover {
  opacity: 0.8;
  transform: scaleY(1.05);
}

.bar-value {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
}

.bar-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #7f8c8d;
  white-space: nowrap;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.module-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.module-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.module-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.module-icon {
  font-size: 36px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-info h3 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 18px;
}

.module-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.module-progress {
  margin-bottom: 15px;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 5px;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.module-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.module-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.module-stat .stat-label {
  font-size: 12px;
  color: #7f8c8d;
}

.module-stat .stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.view-all-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-all-btn:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  transition: all 0.3s ease;
}

.record-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

.record-icon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
  flex-shrink: 0;
}

.record-content {
  flex: 1;
}

.record-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.record-desc {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.record-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #95a5a6;
}

.record-status {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.record-status.completed {
  background: #d4edda;
  color: #155724;
}

.record-status.progress {
  background: #fff3cd;
  color: #856404;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: linear-gradient(135deg, #fff9e6 0%, #fff5d6 100%);
  border-radius: 12px;
  border: 2px solid #FFD700;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.achievement-icon {
  font-size: 36px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
  flex-shrink: 0;
}

.achievement-name {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.achievement-date {
  font-size: 12px;
  color: #7f8c8d;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .modules-grid {
    grid-template-columns: 1fr;
  }

  .chart-bars {
    gap: 5px;
  }

  .bar-value,
  .bar-label {
    font-size: 10px;
  }
}
</style>
